@mixin trans($type:all,$animation:linear, $dur: 0.3s){
    transition: $type $animation $dur;
    -moz-transition: $type $animation $dur; 
    -webkit-transition: $type $animation $dur; 
    -o-transition: $type $animation $dur;
}
div,ul,li,span,option,select{
    margin: 0;
    padding: 0;
    -webkit-user-select: none;   
    -moz-user-select: none;    
    -ms-user-select: none;    
    user-select: none;
}
 
.select-wrap{
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    position: relative;
    line-height: 32px;
    height: 32px;
    margin: auto;
    .select-item{
        display: inline-block;
        width: 100%;
        height: 32px;
        line-height: 32px;
        opacity: 0;
        visibility: hidden;
    }
    .hz-select{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        cursor: pointer;
        text-align: center;
        z-index: 999;
        .checkItem{
            display: block;
            width: 100%;
            height: 32px;
            line-height: 32px;
             border-radius: 6px;
            background: #f5f6fa;
            border: 1px solid #eee;
            text-align: left;
            padding-left: 20px;
            box-sizing: border-box;
            margin: 0;
            &::after{
                 float: right;
                content: "";
                width: 10px;
                height: 100%;
                display: inline-block;
                position: relative;
                right: 6px;
                top: 0;
                background: url('') no-repeat center center;
            }
            &.active::after{
               
                background: url('') no-repeat center center;
            }
            &.disabled::after{
                background: url('') no-repeat center center;
            }
        }
        ul{
            display: block;
            position: absolute;
            top: 40px;
            left:0;
            width: 100%;
            background: #fff;
            border-radius: 6px;
            box-shadow:  0 0 4px #ccc;
            box-sizing: border-box;
            padding: 10px;
            height: 0px;
            z-index: 1001;
            @include trans($dur:.2s);
            overflow: auto;
            visibility: hidden;
            opacity: 0;
            &.open{
                height: auto;
                max-height: 200px;
                visibility: visible;
                opacity: 1;
            }
            &::-webkit-scrollbar {
              width: 6px;
              height: 1px;
            }
            &::-webkit-scrollbar-thumb {
              border-radius: 4px;
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: #5850EC;
            }
            &::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
              border-radius: 4px;
              background: #ddd;
            }
            li{
                text-align: left;
                padding-left: 10px;
                list-style: none;
                border-radius: 4px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                @include trans($dur:0.2s);
                &:hover{
                    background: #eaedff;
                    color: #5850EC;
                }
            }
        }
    }
    
}
